<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello World</title>

	<!--Styles-->
	<link rel="stylesheet" type="text/css" href="myfirstapp/styles/master.css">
	<!--Scripts-->
	<script type="text/javascript" src="myfirstapp/scripts/jquery-1.3.2.min.js"></script>
	
	<!--Main script-->
	<script type="text/javascript">
	
		// Verify if the content is loaded
		$(document).ready(function(){			
			initialize();
		});
		
		function initialize(){			
			// Verify if the widget has been launched in Uniboard
			if(window.uniboard){
				
				// Default values for the reference point
				var x = 0;
				var y = 0;
				// Get the persisted values
				var thickness = 7;
				var color = "white";
				
				// Set the value of each inputbox
				$("#x-input").val(x);
				$("#y-input").val(y);
				$("#thickness-input").val(thickness);
				$("#color-input").val(color);
								
				// Add a click event to the Draw button				
				$("#draw-button").click(function(){
					
					// Get the values from the inputboxes
					x = parseInt($("#x-input").val());
					y = parseInt($("#y-input").val());
					
					// Set the background color
					uniboard.setBackground("dark", false);
					
					// Draw a figure
					draw(x, y, thickness, color);
				});
				
				// Add a click event to the Clear button				
				$("#clear-button").click(function(){
					uniboard.clear();
				});
				
				// Add a click event to the Set Color button				
				$("#set-color-button").click(function(){
					color = $("#color-input").val();
				});
				
				// Add a click event to the Set Thickness button				
				$("#set-thickness-button").click(function(){
					thickness = parseInt($("#thickness-input").val());
				});
				
			};
		};
		
		function draw(x, y, stroke, color){
			uniboard.setTool("pen");
			uniboard.setPenColor(color);
				uniboard.moveTo(x-100, y-100);
				uniboard.drawLineTo(x-100, y+100, stroke);
				uniboard.drawLineTo(x+100, y+100, stroke);
				uniboard.drawLineTo(x+100, y-100, stroke);
				uniboard.drawLineTo(x-100, y-100, stroke);
				uniboard.drawLineTo(x, y-200, stroke);
				uniboard.drawLineTo(x+100, y-100, stroke);
			uniboard.setTool("arrow");
		};
    </script>
</head>

<body>
	<div id="ub-widget">
		<h1>My first Uniboard App</h1>
		<div class="block">
		<h2>Position</h2>
		X&nbsp;:&nbsp;<input type="text" class="inputbox" id="x-input"><br />
		Y&nbsp;:&nbsp;<input type="text" class="inputbox" id="y-input">
		<input type="button" class="button" id="draw-button" value="Draw">
		<input type="button" class="button" id="clear-button" value="Clear">
		</div>
		<div class="block">
		<h2>Style</h2>
		<input type="text" class="inputbox" id="thickness-input">
		<input type="button" class="button" id="set-thickness-button" value="Set as current thickness"><br />
		<input type="text" class="inputbox" id="color-input">
		<input type="button" class="button" id="set-color-button" value="Set as current color">
		</div>
	</div>
</body>

</html>